<template>
  <view v-if="!loadding" :data-theme="theme()" :class="theme() || ''">
    <view class="codePage">
      <!-- 二维码 -->
      <view class="code">
        <view class="title">
          <span class="line"></span>
          <span class="text">平台收款码</span>
          <span class="line"></span>
        </view>
        <swiper class="swiper">
          <swiper-item v-for="(item, key) of listData" :key="key">
            <view class="codeName">收款码：{{ item.payment_name }}</view>
            <image class="codeImage" :src="item.images.file_path" />
            <!-- 充值 -->
            <view class="sumbitCode">
              <view
                class="sumbitPopup"
                @click="submitCode(item.images.file_path)"
                >保存收款码</view
              >
            </view>
          </swiper-item>
        </swiper>
      </view>
      <!-- 列表 -->
      <view class="title">
        <span class="line"></span>
        <span class="text">支付凭证上传记录</span>
        <span class="line"></span>
      </view>
      <view class="list">
        <view class="listView">
          <view class="listFor" v-for="(item, key) of list" :key="key">
            <view class="time">
              <view>上传时间：</view>
              <view>{{ item.create_time }}</view>
            </view>
            <view class="time">
              <view>收款码：</view>
              <view>{{ item.payment_name }}</view>
            </view>
            <view class="time">
              <view>审核状态：</view>
              <view>{{ item.status_text }}</view>
            </view>
            <view class="time">
              <view>支付金额：</view>
              <view>{{ item.pay_money }}</view>
            </view>
            <view class="time">
              <view>金币类型：</view>
              <view>{{ item.point_type == 1 ? "服务金币" : "绿色金币" }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 充值 -->
      <view class="sumbit">
        <view class="sumbitPopup" @click="popup = !popup">充 值</view>
      </view>
    </view>
    <view class="popup" v-if="popup" @click="popup = !popup">
      <view class="popupView up" @click.stop>
        <picker
          @change="bindPickerChange"
          :value="index"
          range-key="payment_name"
          :range="listData"
        >
          <view class="popupMsg">
            <view>支付收款码：</view>
            <view style="min-width: 300rpx; text-align: end">
              <view class="uni-input">{{
                platform.payment_name
                  ? platform.payment_name
                  : "请选择支付收款码"
              }}</view>
            </view>
          </view>
        </picker>
        <view class="popupMsg">
          <view>支付凭证：</view>
          <image @click="choseImage" class="tp" v-if="src" :src="src" />
          <view @click="choseImage" class="tp" v-else>上传凭证</view>
        </view>
        <view class="popupMsg">
          <view>手机号：</view>
          <view>
            <input class="phone" v-model="phone" type="number" maxlength="11" />
          </view>
        </view>
        <view class="popupMsg">
          <view>支付金额：</view>
          <view class="radioGroup">
            ￥<input class="phone" v-model="moeny" type="number" />
          </view>
        </view>
        <view class="popupMsg">
          <view>金币类型：</view>
          <view>
            <radio-group @change="radioChange" class="radioGroup">
              <label
                class="radioGroup"
                style="margin-left: 20rpx"
                v-for="(item, index) in integralList"
                :key="item.index"
              >
                <view>
                  <radio :value="item.type" :checked="index === current" />
                </view>
                <view>{{ item.name }}</view>
              </label>
            </radio-group>
          </view>
        </view>
        <!-- 充值 -->
        <view class="sumbit">
          <view class="sumbitPopup" @click="submit">提 交</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /*是否加载完成*/
      loadding: true,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      state: false,
      duration: 500,
      /*数据*/
      listData: [],
      list: [],
      /*默认地址id*/
      default_id: "0",
      page: 1,
      options: {},
      popup: false,
      src: "",
      platform: {},
      phone: "",
      moeny: "",
      integralList: [
        {
          name: "服务金币",
          type: 1,
        },
        {
          name: "绿色金币",
          type: 2,
        },
      ],
      integralType: "",
    };
  },
  onLoad: function (options) {
    this.options = options;
  },
  onShow: function () {
    uni.showLoading({
      title: "加载中",
    });
    /*获取地址列表*/
    this.getData();
    this.getList();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      let dataType = self.dataType;
      self._post("payments.payments/index", {}, function (res) {
        self.listData = res.data.list;
        self.default_id = res.data.default_id + "";
        self.loadding = false;
        uni.hideLoading();
      });
    },
    /*获取数据*/
    getList(e) {
      if (e) {
        this.page = 1;
      }
      let self = this;
      let dataType = self.dataType;
      self._post(
        "user.user_payment/lists",
        { page: this.page },
        function (res) {
          if (e) {
            setTimeout(() => {
              uni.showToast({
                title: e,
                icon: "none",
              });
            }, 500);
            self.list = [];
          }
          // var list= Array.from(self.list);
          self.list = [...self.list,...res.data.list.data];
          if (res.data.list.total > self.list.length) {
            self.page = self.page+1;
            self.getList();
          }
        }
      );
    },

    /*跳转页面*/
    addAddress() {
      let delta = 1;
      if (this.options.source === "order") {
        delta = 2;
      }
      this.gotoPage("/pages/user/address/add/add?delta=" + delta);
    },
    bindPickerChange(e) {
      console.log("=======================1", e);
      this.platform = this.listData[e.detail.value * 1];
    },
    radioChange(e) {
      console.log("e", e);
      this.integralType = e.detail.value;
    },
    choseImage(e) {
      let self = this;
      let params = {
        token: uni.getStorageSync("token"),
        app_id: self.getAppId(),
      };
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album"],
        success: function (res) {
          console.log("=================", res);
          // 预览图片
          uni.uploadFile({
            url: self.websiteUrl + "/index.php?s=/api/file.upload/image", //仅为示例，非真实的接口地址
            filePath: res.tempFilePaths[0],
            name: "iFile",
            formData: params,
            success: (uploadFileRes) => {
              console.log("上传图片成功", JSON.parse(uploadFileRes.data));
              self.src = JSON.parse(uploadFileRes.data).data.file_path;
            },
            fail: (e) => {
              console.log("上传图片失败", e);
            },
          });
        },
      });
    },
    /*编辑地址*/
    editAddress(e) {
      this.gotoPage("/pages/user/address/edit/edit?address_id=" + e);
    },
    submitCode(src) {
      uni.getImageInfo({
        src,
        success: function (image) {
          console.log("qrcode-------------", image);
          uni.saveImageToPhotosAlbum({
            filePath: image.path,
            success: function () {
              console.log("save success");
            },
            fail: function (e) {
              console.log("save fail", e);
            },
          });
        },
      });
    },
    submit(e) {
      if (!this.platform.payment_id) {
        uni.showToast({
          title: "请选择收款码",
          icon: "none",
        });
        return;
      }
      if (!this.src) {
        uni.showToast({
          title: "请上传支付凭证",
          icon: "none",
        });
        return;
      }
      if (!this.phone) {
        uni.showToast({
          title: "请填写手机号",
          icon: "none",
        });
        return;
      }
      if (!this.moeny) {
        uni.showToast({
          title: "请填写支付金额",
          icon: "none",
        });
        return;
      }
      if (!this.integralType) {
        uni.showToast({
          title: "请选择金币类型",
          icon: "none",
        });
        return;
      }
      // uni.showLoading({
      // 	title: "提交中",
      // });
      if (this.state) return;
      this.state = true;
      let self = this;
      this._post(
        "user.user_payment/add",
        {
          pay_url: this.src,
          phone: this.phone,
          payment_id: this.platform.payment_id,
          pay_money: this.moeny,
          point_type: this.integralType,
        },
        function (res) {
          self.state = false;
          if (res.code == 1) {
            uni.showToast({
              title: res.msg,
              duration: 2000,
            });
            self.integralType = "";
            self.moeny = "";
            self.phone = "";
            self.src = "";
            self.platform = {};
            self.popup = false;
            self.getList(res.msg);
          } else {
            uni.showToast({
              title: res.msg,
              duration: 2000,
            });
          }
        }
      );
    },
    /*删除地址*/
    delAddress(e) {
      let self = this;
      wx.showModal({
        title: "提示",
        content: "您确定要移除当前收货地址吗?",
        success: function (o) {
          o.confirm &&
            self._get(
              "user.address/delete",
              {
                address_id: e,
              },
              function (result) {
                if (result.code == 1) {
                  uni.showToast({
                    title: "删除成功",
                    duration: 2000,
                  });
                  self.getData();
                }
              }
            );
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.codePage {
  width: 100vw;
  height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.code {
  padding: 0 30rpx 30rpx;
  height: 750rpx;
  .swiper {
    width: 100%;
    height: 730rpx;
  }
  .codeName {
    text-align: center;
    color: #555;
  }
  .codeImage {
    width: 450rpx;
    height: 450rpx;
    margin: 30rpx auto 70rpx;
  }
}
.title {
  width: 100%;
  text-align: center;
  padding-bottom: 10rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .text {
    margin: 0 20px;
  }
  .line {
    width: 150rpx;
    height: 1rpx;
    background-color: #ccc;
    display: inline-block;
  }
}
.list {
  display: flex;
  flex-direction: column;
  flex: 1;
  .listView {
    // flex: 1;
    height: 410rpx;
    // height: 100%;
    overflow-y: auto;
    width: 100%;
    .time {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 10rpx 0;
    }
    .listFor {
      margin: 20rpx 40rpx;
      padding-bottom: 5rpx;
      border-bottom: 2rpx solid #eee;
    }
  }
}
.radioGroup {
  display: flex;
  align-items: center;
}
.sumbit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 50rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
  .sumbitPopup {
    // font-size: 25rpx;
    border-radius: 30rpx;
    background-color: #623ceb;
    color: #fff;
    padding: 20rpx;
    margin: 0 20rpx 20rpx;
    text-align: center;
  }
}
.sumbitCode {
  width: 50%;
  // height: 50rpx;
  margin: 0 auto;
  background-color: #fff;
  .sumbitPopup {
    // font-size: 25rpx;
    border-radius: 30rpx;
    background-color: #623ceb;
    color: #fff;
    padding: 20rpx;
    margin: 0 20rpx;
    text-align: center;
  }
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column-reverse;
  .popupView {
    background-color: #fff;
    width: 100%;
    height: 900rpx;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    box-sizing: border-box;
    padding: 30rpx;
    .popupMsg {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 30rpx;
    }
    .phone {
      border-bottom: 2rpx solid #d9d9d9;
      text-align: end;
    }
    .tp {
      width: 300rpx;
      height: 300rpx;
      text-align: center;
      line-height: 300rpx;
      border-radius: 10rpx;
      border: 2rpx solid #d9d9d9;
    }
  }
}
.up {
  animation: up 0.5s;
}
@keyframes up {
  0% {
    margin-bottom: -1700rpx;
  }
}
</style>
